<template>
  <div class="classify-small-view">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="商品列表" left-text="返回" right-text="按钮" left-arrow @click-left="router.back()">
      <template #right>
        <van-icon name="cart" size="18" />
      </template>
    </van-nav-bar>
    <!-- 标题 -->
    <div class="title">{{ baseStore.Classify.title }}</div>
    <!-- 小分类导航栏 -->
    <van-tabs v-model:active="nowClassify">
      <van-tab v-for="item in baseStore.Classify.data" :title="item.product_content"
        :name="item.product_content"></van-tab>
    </van-tabs>
    <van-tabs v-model:active="active">
      <van-tab title="不排序" name="0"></van-tab>
      <van-tab title="价格升序" name="1"></van-tab>
      <van-tab title="价格降序" name="2"></van-tab>
    </van-tabs>
    <!-- 商品列表 -->
    <div v-if="!baseStore.ClassifyGoods[0]">商品正在上架中</div>
    <div class="goods-list">
      <van-row :gutter="[10, 15]">
        <van-col span="12" v-for="item in baseStore.ClassifyGoods" :key="item.goods_id">
          <goods :goods="item"></goods>
        </van-col>
      </van-row>
    </div>
  </div>
  <van-back-top bottom="10vh"/>
</template>

<script setup lang="ts">
// 导入基本仓库
import { useBaseStore } from '../store';

// 创建 路由和仓库实例
let baseStore = useBaseStore();
let route = useRoute();
let router = useRouter();
let nowClassify = ref("");
let active = ref("")

console.log(baseStore.Classify);
// 如果为空,就自动初始化一次
if (baseStore.Classify.cat_id == "") {
  baseStore.getCarData();
}
// 只要值变了就触发函数
watch(nowClassify, Value => {
  baseStore.getClassifyGoods(Value);
})

watch(active, Value => {
  console.log("aa");
  if(Value == "0"){
    baseStore.getClassifyGoods(nowClassify.value);
  }else if(Value == "1"){
    baseStore.ClassifyGoods = baseStore.ClassifyGoods.sort((a, b) => b.price - a.price);
  }else if(Value == "2"){
    baseStore.ClassifyGoods = baseStore.ClassifyGoods.sort((a, b) => a.price - b.price);
  }
})

nowClassify.value = route.query.product_content as string;
</script>

<style scoped lang="less">
.classify-small-view {
  .title {
    text-align: center;
  }

  .goods-list {
    width: 95%;
    margin: 0 auto 0;
  }
}
</style>
